<template>
    <div class="tags" v-if="showTags">
        <ul>
            <li class="tags-li flexWrapCenter" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
                <div class="tags-bar">
                    <router-link :to="item.path" class="tags-li-title">
                        {{item.title}}
                    </router-link>
                    <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close" /></span>
                </div>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags">
                <el-button style="border: 0">
                    我的账号<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu size="medium" slot="dropdown">
                    <el-dropdown-item command="modify"><div class="drop-item">修改资料</div></el-dropdown-item>
                    <a href="https://baidu.com" target="_blank">
                        <el-dropdown-item>
                            <div class="drop-item">帮助中心</div>
                        </el-dropdown-item>
                    </a>
                    <el-dropdown-item command="logout"><div class="drop-item">退出登录</div></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!--修改资料-->
        <el-dialog :visible.sync="modify.show" width="550px" append-to-body border :show-title=false :show-close=false>
            <el-form :model="modify" ref="ruleForm" label-width="80px" class="ms-content">
                <el-form-item prop="name" label="姓名：">
                    <el-input size="mini" v-model="modify.name" placeholder="姓名" />
                </el-form-item>
                <el-form-item prop="password" label="密码：">
                    <el-input size="mini" type="password" placeholder="空表示保持原密码不变" v-model="modify.password" />
                </el-form-item>
                <div class="tCenter mt-40">
                    <el-button type="primary" @click="toModify">修改</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import bus from './bus';
import md5 from "@/utils/md5";
export default {
    data() {
        return {
            tagsList: [],
            modify: {show:false}
        }
    },
    methods: {
        isActive(path) {
            return path === this.$route.fullPath;
        },
        // 关闭单个标签
        closeTags(index) {
            const delItem = this.tagsList.splice(index, 1)[0];
            const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
            if (item) {
                delItem.path === this.$route.fullPath && this.$router.push(item.path);
            }else{
                this.$router.push('/');
            }
        },
        // 关闭全部标签
        closeAll(){
            this.tagsList = [];
            this.$router.push('/');
        },
        // 关闭其他标签
        closeOther(){
            const curItem = this.tagsList.filter(item => {
                return item.path === this.$route.fullPath;
            });
            this.tagsList = curItem;
        },
        // 设置标签
        setTags(route){
            const isExist = this.tagsList.some(item => {
                return item.path === route.fullPath;
            });
            if(!isExist){
                if(this.tagsList.length >= 8){
                    this.tagsList.shift();
                }

                if (route.matched.length > 1) {
                    let v = route.matched[1].components.default
                    this.tagsList.push({
                        title: route.meta.title,
                        path: route.fullPath,
                        name: (v && v.name) ? v.name : ''
                    })
                }
            }
            bus.$emit('tags', this.tagsList);
        },
        handleTags(command){
            switch (command) {
                case "other":
                    this.closeOther(); break;
                case "all":
                    this.closeAll(); break;
                case "logout":
                    this.auth.logout()
                    this.$router.replace({path:'/login'}).catch(()=>{});
                    break;
                case "modify":
                    this.modify.show = true
                    let info = this.auth.getAccount()
                    if (info) {
                        this.modify.name = info.name
                        this.modify.id = info.id
                    }
                    break;
                default:break;
            }
        },

        toModify() {
            let password = ""
            if (this.modify.password) {
                if (this.modify.password.length < 5) {this.$message.error("密码不能小于5位~");return}
                password = md5.hex_md5("hjk0tpk*#en#&" + this.modify.password)
            }

            this.request.post({
                url: "user.modify", data: {id:this.modify.id, name:this.modify.name, password:password}
            }).then(res => {
                this.$message.success({message:"修改成功！", duration:1000});
                this.modify.password = ""
                this.modify.show = false
                this.$forceUpdate()
            },res => {
                this.$message.error(res.msg || "修改失败~");
            })
        }
    },
    computed: {
        showTags() {
            return this.tagsList.length > 0;
        }
    },
    watch:{
        $route(newValue, oldValue){
            this.setTags(newValue);
        }
    },
    created() {
        this.setTags(this.$route);
        //监听关闭当前页面的标签页
        bus.$on('close_current_tags', () => {
            for (let i = 0, len = this.tagsList.length; i < len; i++) {
                const item = this.tagsList[i];
                if(item.path === this.$route.fullPath){
                    if(i < len - 1){
                        this.$router.push(this.tagsList[i+1].path);
                    }else if(i > 0){
                        this.$router.push(this.tagsList[i-1].path);
                    }else{
                        this.$router.push('/');
                    }
                    this.tagsList.splice(i, 1);
                    break;
                }
            }
        })
    }
}

</script>


<style>
.tags {
    position: relative;
    height: 35px;
    overflow: hidden;
    background: #fff;
    padding-right: 120px;
}

.tags ul {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.tags-li {
    float: left;
    font-size: 11px;
    overflow: hidden;
    cursor: pointer;
    height: 35px;
    background: #fff;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #666;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.tags-li:not(.active):hover {
    background: white;
}

.tags-li.active {
    color: #409EFF;
    border: 0;
}

.tags-bar {
    padding:0 5px; margin: 5px 0; border-radius: 5px;
    background-color:  rgba(233,235,242,.42)
}
.tags-bar.active {
    background-color: #e9ebf2;
}

.tags-li-title {
    float: left;
    max-width: 100px;
    min-width: 45px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #666;
    font-weight: bold;
    transform: scale(0.8);
}

.tags-li.active .tags-li-title {
    color: #409EFF
}

.tags-li-icon {line-height: 25px; padding:0 5px 0 0}

.tags-close-box {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    text-align: center;
    width: 110px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
    z-index: 10;
}

.drop-item {
    width: 70px; line-height: 40px; text-align: center;
}

</style>
